$themeBg: #ffffff;
$themeDarkBg: #121212;
$themeBorder: #D4D7DE;
$themeDarkBorder: #4c4d4f;
$fontColor: #000000;
$fontDarkColor: #ffffff;
$fontSubColor: #4e5969;
$fontSubDarkColor: #a0a3a9;

$headerHeight: 59px;
$sidebarWidth: 260px;
$sidebarMinWidth: 65px;
$cardBg: #E4E7ED;
$cardDarkBg: #202020;
$cardHoverBg: #CDD0D6;
$cardDarkHoverBg: #303133;

:export {
  headerHeight: $headerHeight;
  sidebarWidth: $sidebarWidth;
  sidebarMinWidth: $sidebarMinWidth;
}

:root {
  --theme-bg: #{$themeBg};
  --theme-border: #{$themeBorder};
  --font-color: #{$fontColor};
  --font-sub-color: #{$fontSubColor};
  --card-bg: #{$cardBg};
  --card-hover-bg: #{$cardHoverBg};
}

html.dark {
  --theme-bg: #{$themeDarkBg};
  --theme-border: #{$themeDarkBorder};
  --font-color: #{$fontDarkColor};
  --font-sub-color: #{$fontSubDarkColor};
  --card-bg: #{$cardDarkBg};
  --card-hover-bg: #{$cardDarkHoverBg};
}